<template>
  <div class="submit" :style="{'min-height':winHeight + 'px'}">
    <div class="submit_top">
      <router-link to="/address"></router-link>
      <img class="submit_top_img01" :src="img01" alt="">
      <div class="submit_top_div">
        <span>{{ location.name }} {{ location.tel }}</span>
        <p>{{ location.province }} {{ location.city }} {{ location.area }} {{ location.address }}</p>
      </div>
      <img class="submit_top_img02" :src="img02" alt="">
      <img class="submit_top_img03" :src="img03" alt="">
    </div>

    <div class="submit_list">
      <div class="submit_list_div">商品列表</div>
      <ul>
        <li v-for="item in submitobj">
          <img :src="item.goods.pic" alt="">
          <span class="submit_list_div_title">{{item.goods.title}}</span>
          <div class="submit_list_div_sum">
            <span>￥{{item.goods.price}}</span>
            <p>数量: {{item.goods_num}}</p>
          </div>
        </li>
      </ul>
    </div>

    <div class="submit_footer">
      <span>￥{{allprice}}</span>
      <div class="tijiao" @click="npay">提交订单</div>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
import img01 from '../common/images/icon_address.png'
import img02 from '../common/images/arrow-right.png'
import img03 from '../common/images/addr-line.png'
import img04 from '../common/images/product02.jpg'
import axios from 'axios'

export default {
  data () {
    return {
      winHeight: '',
      submitobj: '',
      img01,
      img02,
      img03,
      img04,
      location: '',
      allprice: 0
    }
  },
  methods: {
    npay () {
      console.log(this.location)
      var obj = this.submitobj.map(e => ({
        id: e.goods_id,
        price: e.goods.price,
        num: e.goods_num,
        name: e.goods.title,
        attrs: {
          'size': e.goods.attributes.版本,
          'color': e.goods.attributes.颜色
        }
      }))
      var address = {
        name: this.location.name,
        tel: this.location.tel,
        address: this.location.province + this.location.city + this.location.area + this.location.address
      }
      console.log(address)
      const data = new URLSearchParams()
      data.append('mid', 398)
      data.append('goods', JSON.stringify(obj))
      data.append('address', JSON.stringify(address))
      data.append('total', this.allprice)
      data.append('coupon', '')
      data.append('bonus', '')
      data.append('remarks', '')
      axios.post('/api/' + 'add2Order', data).then(e => {
        console.log(e)
        this.$createDialog({
          type: 'alert',
          title: e.data.msg,
          icon: 'cubeic-alert',
          showClose: false,
          onConfirm () {
            window.location.href = '#/orderlist'
          }
        }).show()
      })
    }
  },
  created () {
    var allprices = 0
    if (typeof (this.$route.query.data[0]) === 'object') {
      this.$cookies.set('submitobjs', JSON.stringify(this.$route.query.data))
    }
    this.submitobj = JSON.parse(this.$cookies.get('submitobjs'))
    this.submitobj.forEach(e => {
      allprices += parseInt(e.goods.price)
    })
    this.allprice = allprices.toFixed(2)
    this.winHeight = $(window).height()
    var urls = 'listAddress' + '/mid/' + 398
    axios.post('/api/' + urls).then(e => {
      var obj = []
      obj = e.data.filter(e => e.status == 1)
      this.location = obj[0]
    })
  }
}
</script>

<style>
.submit{

}
.submit_top{
  width: 6.9rem;
  height: 0.8rem;
  padding: 0.2rem 0.3rem;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  position: relative;
}
.submit_top_img01{
  width: 0.6rem;
}
.submit_top_div{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  margin-left: 0.3rem;
  flex: 1;
}
.submit_top_div span{
  font-size: 0.24rem;
  color: #222222;
}
.submit_top_div p{
  font-size: 0.24rem;
  color: #999999;
}
.submit_top_img02{
  width: 0.12rem;
}
.submit_top a{
  width:100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.submit_top_img03{
  width: 100%;
  height: 0.02rem;
  position: absolute;
  bottom: 0;
  left: 0;
}
.submit_list{
  width: 6.9rem;
  padding: 0 0.3rem;
  background-color: #ffffff;
  margin-top: 0.2rem;
}
.submit_list_div{
  font-size: 0.24rem;
  color: #222222;
  height: 0.6rem;
  border-bottom: 1px solid #e2e2e2;
  line-height: 0.6rem;
}
.submit_list ul{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.submit_list ul li{
  height: 1rem;
  width: 100%;
  padding: 0.2rem 0;
  border-bottom: 1px solid #e2e2e2;
  display: flex;
  align-items: center;
}
.submit_list ul li:last-of-type{
  border-bottom:none;
}
.submit_list_div_title{
  width: 4.5rem;
  height: 100%;
  font-size: 0.24rem;
  color: #222222;
  display: block;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  flex: 1;
}
.submit_list ul li img{
  width: 1rem;
}
.submit_list_div_sum{
  width: 1rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
}
.submit_list_div_sum span{
  font-size: 0.24rem;
  color: #e64340;
}
.submit_list_div_sum p{
  font-size: 0.24rem;
  color: #999999;
}
.submit_footer{
  width: 4rem;
  padding-left: 3.5rem;
  height: 1rem;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.submit_footer span{
  font-size: 0.24rem;
  color: #e64340;
}
.tijiao{
  width: 2rem;
  height: 100%;
  background-color: #e64340;
  line-height: 1rem;
  text-align: center;
  font-size: 0.24rem;
  color: #ffffff;
}
</style>
